<!DOCTYPE html>
<html>
<title>Test that a div can't preventDefault on touches to prevent the overlay play button from working.</title>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="overlay-play-button.js"></script>
<div id="outer">
</div>
<script>
async_test(t => {
  // This test is only valid when the overlay play button is enabled.
  enableOverlayPlayButtonForTest(t);

  const outerDiv = document.getElementById('outer');
  const video = document.createElement('video');
  video.controls = true;
  video.width = 500;
  video.preload = 'none';
  video.src = '../content/60_sec_video.webm';
  outerDiv.appendChild(video);

  let tap_gesture;

  video.addEventListener('loadedmetadata', t.step_func(() => {
    const coordinates = elementCoordinates(mediaControlsOverlayPlayButton(video));
    tap_gesture = touchTapOn(coordinates[0], coordinates[1]);
  }), { once: true });

  video.addEventListener('play', () => {
    tap_gesture.then(t.done.bind(t));
  }, { once: true });

  ['click', 'touchstart', 'touchmove', 'touchend'].forEach(name => {
    outerDiv.addEventListener(name, evt => {
      evt.preventDefault();
      evt.stopPropagation();
    });
  });

  video.load();
});
</script>
</html>
